<template>
    <view class="relationship-content">
        <!-- 加载状态 -->
        <view class="loading-container" v-if="loading">
            <text class="loading-text">加载中...</text>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-else-if="userList.length === 0">
            <text class="empty-text">{{ emptyText }}</text>
        </view>

        <view class="user-list" v-else>
            <view class="list-item" v-for="user in userList" :key="user.userId">
                <view class="user-image">
                    <image
                        class="image"
                        :src="
                            user.avatarUrl ||
                            'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/1.png'
                        "
                    ></image>
                </view>

                <view class="user-info">
                    <view class="user-name">{{ user.username }}</view>
                    <view class="user-bio">{{
                        user.bio || '这个人很懒，什么都没留下'
                    }}</view>
                </view>

                <view
                    class="action-btn"
                    :class="{ mutual: activeTab === 1 }"
                    @click="handleFollowAction(user)"
                >
                    {{ getButtonText(user) }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import {
    getMutualFollowingUsersListAPI,
    getFansUsersListAPI,
    getFollowingUsersListAPI
} from '@/apis/userAPI.js';

const props = defineProps({
    activeTab: {
        type: Number,
        default: 1
    },
    userId: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['follow-change']);

const userList = ref([]);
const loading = ref(true);

// 空状态提示文本
const emptyText = computed(() => {
    switch (props.activeTab) {
        case 1:
            return '暂无互相关注的用户';
        case 2:
            return '您还没有关注任何人';
        case 3:
            return '您还没有粉丝';
        default:
            return '暂无数据';
    }
});

// 获取按钮文本
const getButtonText = (user) => {
    if (props.activeTab === 1) return '取消关注';
    if (props.activeTab === 2) return '取消关注';
    return user.isFollowing ? '取消关注' : '关注';
};

// 处理关注操作
const handleFollowAction = (user) => {
    // 模拟关注/取消关注操作
    if (props.activeTab === 2) {
        // 取消关注
        userList.value = userList.value.filter((u) => u.userId !== user.userId);
    } else {
        // 关注/取关
        user.isFollowing = !user.isFollowing;
    }

    // 通知父组件关注状态变化
    emit('follow-change', user);
};

// 获取用户列表数据
const fetchUserList = async () => {
    loading.value = true;

    try {
        let response;
        switch (props.activeTab) {
            case 1: // 互相关注
                response = await getMutualFollowingUsersListAPI(props.userId);
                break;
            case 2: // 关注
                response = await getFollowingUsersListAPI(props.userId);
                break;
            case 3: // 粉丝
                response = await getFansUsersListAPI(props.userId);
                break;
        }

        if (response.data.code === 20000) {
            userList.value = response.data.data.userList.map((user) => ({
                ...user,
                isFollowing: props.activeTab === 1 || props.activeTab === 2
            }));
        } else {
            uni.showToast({
                title: response.data.message || '获取数据失败',
                icon: 'none'
            });
        }
    } catch (error) {
        console.error('获取用户列表失败:', error);

        uni.showToast({
            title: '网络请求失败',
            icon: 'none'
        });
    } finally {
        loading.value = false;
    }
};

// 监听activeTab变化
watch(
    () => props.activeTab,
    () => {
        fetchUserList();
    },
    { immediate: true }
);
</script>

<style scoped lang="scss">
.relationship-content {
    .user-list {
        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx;

            .user-image {
                width: 88rpx;
                height: 88rpx;
                border-radius: 50%;
                overflow: hidden;

                .image {
                    width: 100%;
                    height: 100%;
                }
            }

            .user-info {
                flex: 1;
                margin: 0 20rpx;
                width: 80%;
                overflow: hidden;

                .user-name {
                    font-size: $han-font-size-base;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .user-bio {
                    font-size: $han-font-size-sm;
                    color: $han-global-secondary-font-color;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .action-btn {
                font-size: $han-font-size-sm;
                color: $han-global-bg-color;
                padding: 10rpx 20rpx;
                border-radius: $han-border-radius-lg;
                background: $han-primary-color;
            }
        }
    }
}
</style>
